<template>
	<view class="flex-col justify-start page">
		<view class="flex-col group_4">
			<view class="flex-col group_5">
				<!-- 		<image class="shrink-0 image_5"
					src="https://ide.code.fun/api/image?token=660c2bed7dc3fc0011cc0426&name=2e7f80eeb4558b0b5be492e66bfa075e.png" />
			 -->
				<!-- <map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map> -->
				<map id="map" class="map" :longitude="longitude" :latitude="latitude" scale="18" :markers="markers"
					style="width: 100%; height: 500px;"></map>
				<view class="flex-col relative group_6">
					<view class="flex-col section">
						<view class="flex-col">
							<view class="flex-row justify-between items-center self-stretch section_2">
								<text class="font_3 text_4">客服全程监督服务质量，如有问题请致电我们</text>
								<!-- <image class="image_6" src="/static/icon/dianh.png" @click="phone()" /> -->
							</view>
							<text class="self-start font_2 mt-19-5">{{datadetail.status_mes}}</text>
						</view>


						<view class="flex-row justify-between group_7 mt-24-5"
							v-if="datadetail.driver_info.length != 0">
							<view class="flex-col group_8">
								<view class="flex-row group_21">
									<text class="font_4">{{datadetail.driver_info.nickname}}</text>
									<text class="font_4 ml-9-5">{{datadetail.driver_info.car_no}}</text>
								</view>
								<view class="mt-14 flex-row items-center">
									<view class="flex-row items-center shrink-0 section_3">
										<image class="shrink-0 image_8" src="/static/icon/tydf.png" />
										<text class="font_5 text_6 ml-3">黄金司机</text>
									</view>
									<!-- <view class="ml-12 group_9">
										<text class="font_6 text_7">已服务</text>
										<text class="font_3 text_9">{{datadetail.driver_info}}</text>
										<text class="font_6">单</text>
									</view> -->
								</view>
							</view>
							<!-- <image class="image_7" src="/static/icon/txs.png" @click="tabsj" /> -->
							<image class="image_7" :src="datadetail.driver_info.avatar" @click="tabsj" />


						</view>

					</view>

					<!-- 	0 => '等待支付',        显示去支付按钮  和取消按钮
					        1 => '支付成功',     
					        2 => '服务中', 
					        3 => '完成',       显示  去评价 按钮
					        4 => '已取消',
					        5 => '已接单', -->



					<view class="mt-6 flex-row equal-division"
						v-if="(datadetail.status == 3 || datadetail.driver_info.length != 0)">
						<view class="flex-row justify-center items-center group_10 group_1" @click="feedback(1)"
							v-if="datadetail.status == 3">
							<image class="image_9" src="/static/icon/ld.png" />
							<text class="font_3 text_32 ml-5-5">订单反馈</text>
						</view>
						<view class="flex-row justify-evenly items-center group_10 group_20" v-else> </view>
						<view class="flex-row justify-evenly items-center group_10 group_20" @click="feedback(2)"
							v-if="datadetail.driver_info.length != 0">
							<image class="image_9" src="/static/icon/dkd.png" />
							<text class="font_3 text_31">司机反馈</text>
						</view>

						<view class="flex-row justify-evenly items-center group_10 group_20" v-else> </view>

						<view class="flex-row justify-center items-center group_10 group_22" @click="feedback(3)"
							v-if="datadetail.status == 3">
							<image class="image_9" src="/static/icon/ddz.png" />
							<text class="font_3 text_1 ml-5-5">意见反馈</text>
						</view>

						<view class="flex-row justify-evenly items-center group_10 group_20" v-else> </view>


					</view>

					<view class="mt-6 flex-col section_4" v-if="1 == 0">
						<view class="flex-col group_11">
							<view class="flex-row justify-between items-center self-stretch">
								<text class="font_7 text_10">已评价</text>
								<view class="flex-row">
									<!-- <image class="image_10" src="/static/icon/dxx.png" /> -->
									<up-rate :count="count" v-model="value" active-color="#FF782C" size="25"
										readonly></up-rate>



								</view>
							</view>
							<text class="self-start font_8 text_11 mt-15-5">收拾的很干净，师傅人很好</text>
						</view>
						<view class="mt-22 flex-row justify-between">
							<!-- <image class="equal-division-item_2" src="/static/icon/t1.png" />
							<image class="equal-division-item_2" src="/static/icon/t2.png" />
							<image class="equal-division-item_2" src="/static/icon/t3.png" />
							<image class="equal-division-item_2" src="/static/icon/t4.png" /> -->
						</view>
					</view>
					<view class="mt-6 flex-col section_5">
						<view class="flex-row justify-between items-center">
							<text class="font_4 text_12">订单详情</text>
							<view class="flex-row items-center group_12" v-if="datadetail.status == 3" @click="jin()">
								<text class="font_6 text_13">投诉</text>
								<image class="shrink-0 image_11" src="/static/icon/right.png" />
							</view>
						</view>

						<view class="flex-row justify-between items-baseline mt-20-5">
							<text class="font_7">服务时间</text>
							<text class="font_9 text_14">{{datadetail.moving_date}}</text>
						</view>

						<view class="flex-row justify-between items-baseline mt-20-5">
							<text class="font_7">服务类型</text>
							<text class="font_9 text_14">{{datadetail.moving_type_mes}}</text>
						</view>

						<view class="flex-col mt-20-5">
							<view class="flex-row justify-between">
								<text class="font_7">车型</text>
								<text class="font_8 text_15">{{datadetail.select_type_mes}}</text>
							</view>
							<view class="mt-20 flex-col">
								<view class="flex-row justify-between self-stretch">
									<text class="font_7 text_16">搬出地址</text>
									<text class="font_8 text_17">{{out_address.position.name}}</text>
									<!-- <text class="font_8 text_17">往事百里地上停车场（入口）</text> -->
								</view>

								<text class="self-end font_5 text_18">
									{{out_address.position.address}} {{out_address.floor}}
									{{yarray[out_address.index].title}}

								</text>


								<!-- in_address -->

								<block v-for="(item,index) in in_address">

									<view class="flex-row justify-between self-stretch group_13">
										<text class="font_7 text_19">搬入地址</text>
										<!-- //******************* -->
										<text class="font_8 text_20">
											{{item.position.name}}
										</text>
									</view>
									<text class="self-end font_5 text_21">

										{{item.position.address}} {{item.floor}}
										{{yarray[item.index].title}}

									</text>
								</block>
								<view class="flex-row justify-between self-stretch group_14">
									<text class="font_7 text_22">费用</text>
									<view class="flex-row group_15">
										<text class="font_7 text_23">{{datadetail.total_amount}}元</text>
										<!-- <image class="shrink-0 image_11" src="/static/icon/right.png" /> -->
									</view>
								</view>

								<!-- 	<view class="flex-row justify-between self-stretch group_14">
									<text class="font_7 text_22">费用</text>
									<view class="flex-row group_15">
										<text class="font_7 text_23">{{datadetail.total_amount}}元</text>
										<image class="shrink-0 image_11" src="/static/icon/right.png" />
									</view>
								</view> -->




								<view class="flex-row justify-between self-stretch group_16">
									<text class="font_7 text_24">支付方式</text>
									<text class="font_8 text_25" v-if="datadetail.pay_method == 'weixin'"> 微信支付 </text>
									<text class="font_8 text_25" v-else-if="datadetail.pay_method == 'other'"> 其他支付
									</text>
									<text class="font_8 text_25" v-else-if="datadetail.pay_method == ''"> 微信支付
									</text>
								</view>
								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">订单编号</text>
									<text class="font_9 text_27">{{datadetail.order_id}}</text>
								</view>
								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">联系人</text>
									<text class="font_9 text_27">{{datadetail.user_name}}</text>
								</view>
								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">手机号</text>
									<text class="font_9 text_27">{{datadetail.user_mobile}}</text>
								</view>
								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">定金支付金额</text>
									<text class="font_9 text_27">{{datadetail.pay_amount}}</text>
								</view>
								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">尾款支付金额</text>
									<text class="font_9 text_27">{{datadetail.sec_pay_amount}}</text>
								</view>

								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">大件搬运</text>
									<text class="font_9 text_27">{{datadetail.is_big == 1 ? '是':'否' }}</text>
								</view>
								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">家具拆装</text>
									<text class="font_9 text_27">{{datadetail.is_disassembly == 1 ? '是':'否' }}</text>
								</view>

								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">平地搬运</text>
									<text class="font_9 text_27">{{datadetail.is_flat == 1 ? '是':'否' }}</text>
								</view>
								<view class="flex-row justify-between items-center self-stretch group_17">
									<text class="font_7 text_26">额外服务</text>
									<text class="font_9 text_27">{{datadetail.is_extra_service == 1 ? '是':'否' }}</text>
								</view>



								<!-- 
								大件搬运 is_big
								家具拆装 is_disassembly
								平地搬运 is_flat
								额外服务 is_extra_service -->

								<!-- 	定金支付金额。和尾款支付金额 -->




							</view>
						</view>
					</view>
					<view class="mt-6 flex-col items-start section_6">
						<text class="font_4 text_28">备注</text>
						<text class="mt-22 font_9" style="line-height:45rpx;">{{datadetail.remark}}</text>
					</view>
				</view>


				<view class="bottom" v-if="datadetail.status != 1">


					<view style="display:flex;">

						<text class="anniubian" v-if="datadetail.status == 0" @tap.stop="zhifu()"> 支付定金 </text>
						<text class="anniubian" v-if="datadetail.status == 0" style="margin-left: 20rpx;"
							@tap.stop="quxiao()"> 取消 </text>
						<text class="anniubian" v-if="datadetail.status == 3"> 去评价 </text>
						<text style="width:30rpx;"> </text>



					</view>
				</view>
			</view>
			<view class="section_7"></view>
		</view>
	</view>
</template>

<script>
	import {
		debug
	} from 'util'
	import {
		detail,
		FloorList,
		Cancel
	} from '@/utils/user.js'

	export default {
		data() {
			return {
				datadetail: {},

				count: 5,
				value: 4,

				car: ['小面', '金杯', '依维柯', '箱货'],
				array: [],
				yarray: [],

				out_address: {},
				in_address: [],

				// 中心点坐标
				longitude: 0,
				latitude: 0,
				// 标记点
				markers: [],
				id: 0,
			}
		},
		onLoad(e) {
			this.id = e.id
			this.query(e.id)
		},
		methods: {




			zhifu() {


				var params = this.datadetail

				// 将 params 对象转换为查询字符串
				const queryString =
					`id=${encodeURIComponent(params.order_id)}&pick=${encodeURIComponent(params.init_amount)}`;
				uni.navigateTo({
					url: '/pages/Orderconfirmation/Orderconfirmation?' + queryString
				});




			},
			// 取消订单
			quxiao() {


				var data = {
					order_id: this.datadetail.order_id
				}

				Cancel(data).then(res => {
					console.log(res)
					if (res.data.data.result) {

						uni.showToast({
							title: '取消成功',
							icon: 'none',
							duration: 2000
						})

						this.query(this.id)

					}

				}).catch(error => {
					console.error('Cancel 方法执行出错：', error);
				});
			},


			jin() {

				uni.navigateTo({
					url: '/pages/Feedback/Feedback'
				})


			},

			feedback(i) {




				if (i == 3) {
					this.jin()
					return
				}

				// this.datadetail.moving_type

				// this.datadetail.order_id

				uni.navigateTo({
					url: '/pages/Feedbackse/Feedbackse?type=' + i + '&order_id=' + this.datadetail.order_id +
						'&moving_type=' + this.datadetail.moving_type + '&sjid=' + this.datadetail.driver_info.uid
				})
			},

			query(e) {


				FloorList().then(res => {
					console.log(res)

					this.yarray = Object.values(res.data.data);
					var arry = []
					this.yarray.forEach(function(obj) {
						arry.push(obj.title);
					});
					this.array = arry
				}).catch(error => {
					console.error('FloorList 方法执行出错：', error);
				});





				var data = {
					order_id: e
				}
				console.log(data)

				detail(data).then(res => {
					console.log(res)

					this.datadetail = res.data.data

					// 出发 
					this.out_address = res.data.data.out_address
					// 到达
					this.in_address = res.data.data.in_address

					// // 获取数据
					const outAddress = res.data.data.out_address;
					const inAddress = res.data.data.in_address;

					// // 将 outAddress 放到 inAddress 数组的第一个位置
					// inAddress.unshift(outAddress);


					const newInAddress = [outAddress, ...inAddress];


					// 现在 inAddress 数组已经更新

					var list = newInAddress
					var markers = []
					var markers = list.map((item, index) => {
						console.log(item.position.name, 'name')
						return {
							id: index, // 唯一标识符
							latitude: item.position.latitude,
							longitude: item.position.longitude,
							title: item.position.name,
							iconPath: '/static/icon.png', // 可以替换为自定义图标路径
							width: 50,
							height: 50,
							callout: {
								content: item.position.name,
								display: 'ALWAYS'
							}
						};
					});
					console.log('markers：', markers)
					// 中心点坐标
					this.longitude = res.data.data.out_address.position.longitude,
						this.latitude = res.data.data.out_address.position.latitude,
						// 标记点
						this.markers = markers

				}).catch(error => {
					console.error('detail 方法执行出错：', error);
				});
			},

			tabsj() {
				uni.navigateTo({
					url: '/pages/master/master'
				})
			}

		}
	}
</script>

<style>
	.anniubian {
		font-size: 30rpx;
		color: #222;
		padding: 5rpx 20rpx;
		border-radius: 15rpx;
		margin-left: auto;
		border: 1rpx solid #2b8eff;
		margin-top: 50rpx;
	}

	.bottom {
		position: fixed;
		height: 150rpx;
		z-index: 999;
		background-color: #ffffff;
		bottom: 0;
		width: 100%;

	}

	.map {
		width: 100%;
		height: 600rpx;
	}

	.mt-19-5 {
		margin-top: 39rpx;
	}

	.mt-24-5 {
		margin-top: 49rpx;
	}

	.ml-9-5 {
		margin-left: 19rpx;
	}

	.ml-3 {
		margin-left: 6rpx;
	}

	.ml-5-5 {
		margin-left: 11rpx;
	}

	.ml-8-5 {
		margin-left: 17rpx;
	}

	.mt-15-5 {
		margin-top: 31rpx;
	}

	.mt-20-5 {
		margin-top: 41rpx;
	}

	.page {
		padding-bottom: 175rpx;
		background-color: #f6f7f9;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
	}

	.group_4 {
		overflow-y: auto;
	}

	.group_5 {
		padding-bottom: 38rpx;
		height: 2391rpx;
	}

	.image_5 {
		width: 100vw;
		height: 103.7333vw;
	}

	.group_6 {
		margin-top: -138rpx;
		padding: 0 12rpx;
	}

	.section {
		padding-bottom: 57rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_2 {
		padding: 17rpx 24rpx 16rpx 26.98rpx;
		background-image: linear-gradient(93.5deg, #e3e5fe 2.4%, #fef2f3 97.8%);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
	}

	.font_3 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.26rpx;
		color: #2b8eff;
	}

	.text_4 {
		color: #422d99;
		line-height: 23.66rpx;
	}

	.image_6 {
		width: 46rpx;
		height: 46rpx;
	}

	.font_2 {
		margin-left: 34.96rpx;
		color: #222222;
		font-size: 34rpx;
		font-family: PingFang SC;
		line-height: 31.86rpx;
	}

	.group_7 {
		padding: 0 32rpx;
	}

	.group_8 {
		margin: 7.66rpx 0 3rpx;
	}

	.group_21 {
		padding-left: 2.02rpx;
	}

	.font_4 {
		font-size: 32rpx;
		font-family: PingFang SC;
		line-height: 29.78rpx;
		color: #222222;
	}

	.section_3 {
		background-color: #ff9a51;
		border-radius: 16.5rpx;
		width: 131rpx;
	}

	.image_8 {
		border-radius: 50%;
		width: 34rpx;
		height: 34rpx;
	}

	.font_5 {
		font-size: 20rpx;
		font-family: PingFang SC;
		line-height: 18.48rpx;
		color: #666666;
	}

	.text_6 {
		color: #ffffff;
		line-height: 18.58rpx;
	}

	.group_9 {
		line-height: 22.26rpx;
		height: 22.26rpx;
	}

	.font_6 {
		font-size: 24rpx;
		font-family: PingFang SC;
		line-height: 22.26rpx;
		color: #666666;
	}

	.text_7 {
		line-height: 22.12rpx;
	}

	.text_9 {
		line-height: 17.8rpx;
	}

	.image_7 {
		margin-right: 22rpx;
		width: 102rpx;
		height: 102rpx;
	}

	.equal-division {
		padding: 31.92rpx 8.22rpx 32rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_10 {
		flex: 1 1 236.52rpx;
	}

	.group_1 {
		padding: 10rpx 28.12rpx 10.08rpx 30.78rpx;
	}

	.image_9 {
		width: 22rpx;
		height: 26rpx;
	}

	.text_32 {
		line-height: 22.44rpx;
	}

	.group_20 {
		padding: 10.08rpx 29.5rpx 10rpx 30.18rpx;
	}

	.text_31 {
		line-height: 22.48rpx;
	}

	.group_22 {
		padding: 10.08rpx 28rpx 10rpx 30.66rpx;
	}

	.text_1 {
		line-height: 22.44rpx;
	}

	.section_4 {
		padding: 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.group_11 {
		padding-left: 4.66rpx;
		padding-right: 3rpx;
	}

	.font_7 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25.98rpx;
		color: #666666;
	}

	.text_10 {
		line-height: 25.74rpx;
	}

	.image_10 {
		border-radius: 2rpx;
		width: 43rpx;
		height: 43rpx;
	}

	.font_8 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 25.98rpx;
		color: #222222;
	}

	.text_11 {
		line-height: 28.3rpx;
	}

	.equal-division-item_2 {
		border-radius: 4rpx;
		width: 154rpx;
		height: 154rpx;
	}

	.section_5 {
		padding: 39.46rpx 9.88rpx 38.12rpx 26.04rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_12 {
		line-height: 29.94rpx;
	}

	.group_12 {
		margin-right: 31.12rpx;
	}

	.text_13 {
		line-height: 22.08rpx;
	}

	.image_11 {
		width: 23rpx;
		height: 23rpx;
	}

	.font_9 {
		font-size: 28rpx;
		font-family: PingFang SC;
		line-height: 20.78rpx;
		color: #222222;
	}

	.text_14 {
		margin-right: 18.38rpx;
	}

	.text_15 {
		margin-right: 21.02rpx;
	}

	.text_16 {
		line-height: 25.74rpx;
	}

	.text_17 {
		line-height: 26.14rpx;
	}

	.text_18 {
		margin-right: 20.28rpx;
		margin-top: 19.56rpx;
	}

	.group_13 {
		margin-top: 28.82rpx;
	}

	.text_19 {
		line-height: 25.74rpx;
	}

	.text_20 {
		line-height: 26.14rpx;
	}

	.text_21 {
		margin-right: 20.28rpx;
		margin-top: 19.56rpx;
	}

	.group_14 {
		margin-top: 29.04rpx;
	}

	.text_22 {
		line-height: 25.88rpx;
	}

	.group_15 {
		margin-right: 31.42rpx;
	}

	.text_23 {
		color: #ff772b;
		line-height: 24.2rpx;
	}

	.group_16 {
		margin-top: 44.94rpx;
	}

	.text_24 {
		line-height: 26.02rpx;
	}

	.text_25 {
		margin-right: 18.86rpx;
		line-height: 26.02rpx;
	}

	.group_17 {
		margin-top: 46.04rpx;
	}

	.text_26 {
		line-height: 25.96rpx;
	}

	.text_27 {
		margin-right: 20.44rpx;
	}

	.section_6 {
		padding: 39.38rpx 25.76rpx 40.6rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.text_28 {
		line-height: 29.92rpx;
	}

	.section_7 {
		background-color: #f4f5f7;
		height: 68rpx;
	}
</style>